<template>
  <div>
    <el-drawer
      v-if="visible"
      :title="title"
      size="70%"
      :visible.sync="visible"
      :wrapper-closable="true"
      :append-to-body="true"
    >
      <div class="page">
        <el-table-form ref="form" :model="query">
          <el-form-item label="出库/入库:" prop="storeType">
            <el-select v-model="query.storeType" filterable clearable placeholder="请选择" @change="storeTypeChange">
              <el-option
                v-for="(item,index) in ledgerList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="单据类型:" prop="reBillType">
            <el-select v-model="query.reBillType" clearable filterable placeholder="请选择">
              <el-option
                v-for="item in reBillTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <template v-slot:btns>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          </template>
        </el-table-form>

        <lb-table
          ref="lbTable"
          v-el-height-adaptive-table="{bottomOffset:10}"
          border
          :immediate-fetch="false"
          highlight-current-row
          element-loading-text="加载中"
          :column="tableData.column"
          :data="tableData.data"
          pagination
          :total="tableData.total"
          :custom-column="false"
          @fetch="fetchData"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { invenUserQuery } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'

  export default {
    components: {

    },
    data() {
      return {
        visible: false,
        temp: {},
        title: '',
        query: {
          storeType: '',
          reBillType: ''
        },
        reBillTypeList: [],
        ledgerList: [
          { label: '全部', value: '' },
          { label: '出库', value: 1 },
          { label: '入库', value: 2 }
        ],
        reBillTypeListALL: [
          { label: '领瓶入库', value: 4 },
          { label: '还瓶出库', value: 5 },
          { label: '订单配送', value: 7 },
          { label: '预约退瓶', value: 9 }
        ],
        tableData: {
          data: [],
          total: 0,
          column: [
            {
              prop: 'storeType',
              label: '出库/入库',
              minWidth: 110,
              render: (h, { row }) => (
            <span>
              {row.storeType ? formatColumnMap(this.ledgerList, 'value', row.storeType, 'label')
                : ''}
            </span>
          )
            },
            {
              prop: 'reBillType',
              label: '单据类型',
              minWidth: 110,
              render: (h, { row }) => (
            <span>
              {row.reBillType ? formatColumnMap(this.reBillTypeListALL, 'value', row.reBillType, 'label')
                : ''}
            </span>
          )
            },
            {
              prop: 'gdCount',
              label: '数量',
              minWidth: 80
            },
            {
              prop: 'reBillCode',
              label: '关联单号',
              minWidth: 160
            },
            {
              prop: 'operator',
              label: '操作人',
              minWidth: 110
            },
            {
              prop: 'operatorTime',
              label: '操作时间',
              minWidth: 160,
              render: (h, { row }) => <span>{ row.operatorTime && parseTime(row.operatorTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            }
          ]
        }
      }
    },
    computed: {
    },
    watch: {

    },
    created() {
      this.storeTypeChange()
    },
    methods: {
      open(temp) {
        this.title = ''
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = temp
            const s = temp.gdStatus ? temp.gdStatus === 1 ? '重瓶' : temp.gdStatus === 2 ? '空瓶' : '' : ''
            this.title = temp.goodsSpec + `(${s}) - 库存明细`
            this.search()
          }
        })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          currentPage,
          pageSize,
          params: {
            storeId: this.temp.storeId,
            specCode: this.temp.specCode,
            gdStatus: this.temp.gdStatus,
            reBillType: this.query.reBillType || 0,
            storeType: this.query.storeType || 0
          }
        }
        const res = await invenUserQuery(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      search() {
        this.fetchData({ currentPage: 1, pageSize: 20 })
      },
      storeTypeChange() {
        this.query.reBillType = ''
        this.reBillTypeList = this.reBillTypeListALL
        switch (this.query.storeType) {
        case 1:
          this.reBillTypeList = this.reBillTypeList.filter(item => item.value === 5 || item.value === 7 || item.value === 9)
          break
        case 2:
          this.reBillTypeList = this.reBillTypeList.filter(item => item.value === 4 || item.value === 7 || item.value === 9)
          break
        default:
          break
        }
      }

    }
  }
</script>

<style lang='scss' scoped>
  .page {
    margin: 0 10px;
  }
</style>
